<template>
  <div class="container mt-3 mb-3">
    <div class="columns">
      <div class="column is-one-quarter">
        <input
          class="input"
          type="text"
          placeholder="Text input"
          @keyup.enter="addTodo"
          v-model="todoText"
        >
      </div>
      <div class="column is-one-quarter mt-1">
          <button class="button is-dark is-small " @click="addTodo" >添加</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      todoText: ''
    }
  },
  methods: {
    addTodo () {
      this.$emit('add-todo', { title: this.todoText })
      this.todoText = ''
    }
  }
}
</script>

<style>

</style>
